<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<div class="container-fluid" id="deployHistoryList">
    <div class="modal-body">
        <div ng-cloak="" class="tabsdemoDynamicHeight">
            <md-content>
                <md-tabs md-dynamic-height="" md-border-bottom="">
                    <md-tab label="Message Key">
                        <md-content class="md-padding" style="min-height:600px">
                            <h5 class="md-display-5">Only Return 64 Messages</h5>

                            <form class="form-inline pull-left col-sm-12">
                                <div class="form-group">
                                    <label>Topic:</label>
                                </div>
                                <div class="form-group">
                                    <div style="width: 300px">
                                        <select name="mySelectTopic" chosen
                                                ng-model="selectedTopic"
                                                ng-options="item for item in allTopicList"
                                                required>
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Key:</label>
                                    <input class="form-control" style="width: 450px" type="text" ng-model="key"
                                           required/>
                                </div>

                                <button type="button" class="btn btn-raised btn-sm  btn-primary" data-toggle="modal"
                                        ng-click="queryMessageByTopicAndKey()">
                                    <span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
                                </button>
                            </form>
                            <table class="table table-bordered">
                                <tr>
                                    <th class="text-center">Message ID</th>
                                    <th class="text-center">Tag</th>
                                    <th class="text-center">Message Key</th>
                                    <th class="text-center">StoreTime</th>
                                    <th class="text-center">Operation</th>
                                </tr>
                                <tr ng-repeat="item in queryMessageByTopicAndKeyResult">
                                    <td class="text-center">{{item.msgId}}</td>
                                    <td class="text-center">{{item.properties.TAGS}}</td>
                                    <td class="text-center">{{item.properties.KEYS}}</td>
                                    <td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
                                    </td>
                                    <td class="text-center">
                                        <button class="btn btn-raised btn-sm btn-primary" type="button"
                                                ng-click="queryMessageTraceByMessageId(item.msgId,item.topic)">Message Trace Detail
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </md-content>
                    </md-tab>
                    <md-tab label="Message ID">
                        <h5 class="md-display-5">topic can't be empty if you producer client version>=v3.5.8</h5>
                        <md-content class="md-padding" style="min-height:600px">
                            <form class="form-inline pull-left col-sm-12">
                                <div class="form-group">
                                    <label>Topic:</label>
                                </div>
                                <div class="form-group ">
                                    <div style="width: 300px">
                                        <select name="mySelectTopic" chosen
                                                ng-model="selectedTopic"
                                                ng-options="item for item in allTopicList"
                                                required>
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>MessageId:</label>
                                    <input class="form-control" style="width: 450px" type="text" ng-model="messageId"
                                           required/>
                                </div>
                                <button type="button" class="btn btn-raised btn-sm  btn-primary" data-toggle="modal"
                                        ng-click="queryMessageByMessageId(messageId,selectedTopic)">
                                    <span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
                                </button>
                            </form>
                            <table class="table table-bordered">
                                <tr>
                                    <th class="text-center">Message ID</th>
                                    <th class="text-center">Tag</th>
                                    <th class="text-center">Message Key</th>
                                    <th class="text-center">StoreTime</th>
                                    <th class="text-center">Operation</th>
                                </tr>
                                <tr ng-repeat="item in queryMessageByMessageIdResult">
                                    <td class="text-center">{{item.msgId}}</td>
                                    <td class="text-center">{{item.properties.TAGS}}</td>
                                    <td class="text-center">{{item.properties.KEYS}}</td>
                                    <td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
                                    </td>
                                    <td class="text-center">
                                        <button class="btn btn-raised btn-sm btn-primary" type="button"
                                                ng-click="queryMessageTraceByMessageId(item.msgId,item.topic)">Message Trace Detail
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </md-content>
                    </md-tab>
                </md-tabs>
            </md-content>
        </div>

    </div>
</div>


<script type="text/ng-template" id="messageTraceDetailViewDialog">
    <md-content class="md-padding">
        <div class="row">
            <div id="messageTrace" class="container">
                <a>
                    <h3 data-toggle="collapse" data-target="#messageTraceGraph">
                        Message Trace Graph
                    </h3>
                </a>
                <div id="messageTraceGraph" class="collapse in" style="height: 500px; width: 1024px"/>
            </div>
        </div>
        <div class="row">
            <div id="producerSendMessage" class="container">
                <a>
                    <h3 data-toggle="collapse" data-target="#sendMessageTrace">
                        Send Message Trace
                    </h3>
                </a>
                <div id="sendMessageTrace" class="collapse in">
                    <div ng-if="ngDialogData.producerNode == null">
                        No Producer Trace Data
                    </div>
                    <div id="producerTrace" ng-if="ngDialogData.producerNode != null">
                        <h4>Send Message Info : ( Message Id <b>{{ngDialogData.producerNode.msgId}}</b> )</h4>
                        <div class="panel panel-default">

                            <form>
                                <div class="form-row">
                                    <div class="form-group col-md-3">
                                        <label for="topic">Topic</label>
                                        <input type="text" class="form-control" id="topic" value="{{ngDialogData.producerNode.topic}}" readonly>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="producerGroup">ProducerGroup</label>
                                        <input type="text" class="form-control" id="producerGroup" value="{{ngDialogData.producerNode.groupName}}" readonly>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="keys">Message Key</label>
                                        <input type="text" class="form-control" id="keys" value="{{ngDialogData.producerNode.keys}}" readonly>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="tags">Tag</label>
                                        <input type="text" class="form-control" id="tags" value="{{ngDialogData.producerNode.tags}}" readonly>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-3">
                                        <label for="beginTimestamp">BeginTimestamp</label>
                                        <input type="text" class="form-control" id="beginTimestamp"
                                               value="{{ngDialogData.producerNode.traceNode.beginTimestamp | date:'yyyy-MM-dd HH:mm:ss.sss'}}" readonly>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="endTimestamp">EndTimestamp</label>
                                        <input type="text" class="form-control" id="endTimestamp"
                                               value="{{ngDialogData.producerNode.traceNode.endTimestamp | date:'yyyy-MM-dd HH:mm:ss.sss'}}" readonly>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="costTime">CostTime</label>
                                        <input type="text" class="form-control" id="costTime"
                                               value="{{ngDialogData.producerNode.traceNode.costTime === 0? '<1':ngDialogData.producerNode.traceNode.costTime}}ms"
                                               readonly>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="msgType">MsgType</label>
                                        <input type="text" class="form-control" id="msgType" value="{{ngDialogData.producerNode.traceNode.msgType}}" readonly>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-3">
                                        <label for="clientHost">ClientHost</label>
                                        <input type="text" class="form-control" id="clientHost"
                                               value="{{ngDialogData.producerNode.traceNode.clientHost}}" readonly>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="storeHost">StoreHost</label>
                                        <input type="text" class="form-control" id="storeHost"
                                               value="{{ngDialogData.producerNode.traceNode.storeHost}}" readonly>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="retryTimes">RetryTimes</label>
                                        <input type="text" class="form-control" id="retryTimes" value="{{ngDialogData.producerNode.traceNode.retryTimes}}" readonly>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="offSetMsgId">OffSetMsgId</label>
                                        <input type="text" class="form-control" id="offSetMsgId" value="{{ngDialogData.producerNode.offSetMsgId}}" readonly>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="producerTransaction"
                             ng-show="ngDialogData.producerNode.transactionNodeList.length > 0">
                            <h4>Check Transaction Info : </h4>
                            <table class="table table-bordered">
                                <tr>
                                    <th class="text-center">Timestamp</th>
                                    <th class="text-center">TransactionState</th>
                                    <th class="text-center">FromTransactionCheck</th>
                                    <th class="text-center">ClientHost</th>
                                    <th class="text-center">StoreHost</th>
                                </tr>
                                <tr ng-repeat="transactionNode in ngDialogData.producerNode.transactionNodeList">
                                    <td class="text-center">
                                        {{transactionNode.beginTimestamp | date:'yyyy-MM-dd HH:mm:ss.sss'}}
                                    </td>
                                    <td class="text-center">{{transactionNode.transactionState}}</td>
                                    <td class="text-center">{{transactionNode.fromTransactionCheck}}</td>
                                    <td class="text-center">{{transactionNode.clientHost}}</td>
                                    <td class="text-center">{{transactionNode.storeHost}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div id="subscriptionConsumeMessage" class="container">
                <a>
                    <h3 data-toggle="collapse" data-target="#consumeMessageTrace">
                        Consume Message Trace
                    </h3>
                </a>
                <div id="consumeMessageTrace" class="collapse in">
                    <div id="consumerTrace" ng-show="ngDialogData.subscriptionNodeList.length > 0">
                        <div ng-repeat="subscriptionNode in ngDialogData.subscriptionNodeList">
                            <div class="container">
                                <a>
                                    <h3 data-toggle="collapse"
                                        data-target="#subscriptionNode{{subscriptionNode.subscriptionGroup}}">
                                        SubscriptionGroup : {{subscriptionNode.subscriptionGroup}}
                                    </h3>
                                </a>
                                <div id="subscriptionNode{{subscriptionNode.subscriptionGroup}}" class="collapse in">
                                    <table class="table table-bordered">
                                        <tr>
                                            <th class="text-center">BeginTimestamp</th>
                                            <th class="text-center">EndTimestamp</th>
                                            <th class="text-center">CostTime</th>
                                            <th class="text-center">Status</th>
                                            <th class="text-center">RetryTimes</th>
                                            <th class="text-center">ClientHost</th>
                                            <th class="text-center">StoreHost</th>
                                        </tr>
                                        <tr ng-repeat="consumeNode in subscriptionNode.consumeNodeList">
                                            <td class="text-center">
                                                {{consumeNode.beginTimestamp < 0 ? 'N/A' :
                                                    (consumeNode.beginTimestamp | date:'yyyy-MM-dd HH:mm:ss.sss')}}
                                            </td>
                                            <td class="text-center">
                                                {{consumeNode.endTimestamp < 0 ? 'N/A' :
                                                    (consumeNode.endTimestamp | date:'yyyy-MM-dd HH:mm:ss.sss')}}
                                            </td>
                                            <td class="text-center">{{consumeNode.costTime < 0 ? 'N/A' :
                                                    ((consumeNode.costTime === 0 ? '<1' : consumeNode.costTime) + 'ms')}}
                                            </td>
                                            <td class="text-center">{{consumeNode.status}}</td>
                                            <td class="text-center">
                                                {{consumeNode.retryTimes < 0 ? 'N/A' : consumeNode.retryTimes}}
                                            </td>
                                            <td class="text-center">{{consumeNode.clientHost}}</td>
                                            <td class="text-center">{{consumeNode.storeHost}}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-show="ngDialogData.subscriptionNodeList.length == 0">
                        No Consumer Trace Data
                    </div>
                </div>
            </div>
        </div>
    </md-content>
    <div class="ngdialog-buttons">
        <button type="button" class="ngdialog-button ngdialog-button-secondary"
                ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
        </button>
    </div>
</script>

<script type="text/ng-template" id="operationResultDialog">
    <div class="modal-header">
        <h4 class="modal-title">Result</h4>
    </div>
    <div class="modal-body ">
        <form class="form-horizontal" novalidate>
            {{ngDialogData.result}}
        </form>
    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
            </button>
        </div>
    </div>
</script>